<template>
    <section class="checkarea">
        <input type="checkbox" :id="title" :value="myval" @click="changeval">
        <label :for="title" class="checklabel" >
            <span>
                √
            </span>
            <span><slot></slot></span>
        </label>
    </section>
</template>
<script>
export default {
    props:['val','title'],
    data(){
        return{
            myval:false
        }
    },
    methods:{
        changeval(){
            this.myval=!this.myval
            this.$emit("update:val",this.myval)
        }
    }
}
</script>

<style lang="scss" scoped>
@import "../../assets/css/variables.scss";
.checklabel{
    span:nth-child(1){
        display: inline-block;
        width:18px;
        height:18px;
        border:1px solid #ccc;
        text-align: center;
        line-height: 18px;
        color:#fff;
    }
}
.checkarea>input:checked+label{
    span{
        color:$xtxColor
    }
    span:nth-child(1){
        border:1px solid $xtxColor;
    }
}
</style>

